<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card layui-hide">
	<div class="layui-card-body">
		<form class="layui-form" action="">
			<div class="layui-row">
				<div class="layui-col-xs3 layui-col-sm6 layui-col-md3">
					<div class="layui-form-item">
						<div class="layui-input-group">
							<div class="layui-input-prefix">
								部门名称
							</div>
							<input type="text" name="name" placeholder="请输入部门名称" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
					<div class="layui-form-item">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
							<i class="layui-icon layui-icon-search"></i>查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>重置
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="layui-card">
	<div class="layui-card-body">
		<table id="data-table" lay-filter="data-table-filter"></table>
	</div>
</div>

<script type="text/html" id="toolbarLeftTpl">
	<div id="pageBtnDiv"></div>
</script>
<script type="text/html" id="operationTpl">
</script>

<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
	layui.use(['treeTable', 'form', 'jquery','layer', 'admin', 'dict'], function() {
		let treeTable = layui.treeTable;
		let form = layui.form;
		let $ = layui.jquery;
		let layer = layui.layer;
		let admin = layui.admin;
		let dict = layui.dict;

		let cols = [[
			{ type: 'checkbox', hide: true },
			{ field: 'id', title: 'ID', width: 200, hide: true },
			{ field: 'parentId', title: 'PARENT_ID', width: 200, hide: true },
			{ field: 'name', title: '部门名称', width: 200, align: 'center' },
			{ field: 'code', title: '部门编码', width: 200, align: 'center' },
			{ field: 'sort', title: '排序号', width: 80, align: 'center' },
			{ field: 'operation', title: '操作', align: 'center', fixed: 'right',toolbar: '#operationTpl' }
		]]

		treeTable.render({
			elem: '#data-table',
			url: '/system/dept/list',
			parseData: function(res) {
				return {
					"code": 0,
					"msg": 'SUCCESS',
					"count": res.data.length,
					"data": res.data
				};
			},
			tree: {
				customName: {
					children: 'children',
					isParent: 'isParent',
					name: 'name',
					id: 'id',
					pid: 'parentId',
					icon: 'icon',
				},
				data: { isSimpleData: true, rootPid: 0 },
				view: {
					iconLeaf: ''
				}
			},
			cols: cols,
			skin: 'line',
			toolbar: '#toolbarLeftTpl',
			defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports']
		});

		treeTable.on('toolbar(data-table-filter)', function(obj) {
			if (obj.event === 'add') {
				window.edit();
			} else if (obj.event === 'batchDelete') {
				window.batchDelete();
			} else if (obj.event === 'refresh') {
				window.refresh(true);
			}
		});

		treeTable.on('tool(data-table-filter)', function(obj) {
			let row = obj.data;
			switch (obj.event) {
				case 'detail':
					window.detail(row.id);
					break;
				case 'edit':
					window.edit(row.id);
					break;
				case 'delete':
					window.delete(obj);
					break;
				case 'disabled':
					window.setDisabledValue(obj);
					break;
				default:
					break;
			}
		});

		form.on('submit(data-table-query-filter)', function(data) {
			window.refresh(data.field);
			return false;
		});

		window.refresh = function(field = {}, deep = false) {
			$.vtl.tableReloadData('data-table', field, deep);
		}

		window.edit = function(id) {
			let url = 'edit.html' + ($.vtl.isBlank(id) ? '' : ('?id=' + id));
			$.vtl.openLayer(url, { title: '编辑', area: ['900px', '90%'] });
		}

		window.delete = function(obj) {
			layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
				layer.close(index);
				$.delete('/sys/menu/' + obj.data.id, function(result) {
					if (result.code == 200) {
						obj.del();
					}
				});
			});
		}

		window.detail = function(id, title = '详情') {
			top.layui.admin.jump('sys/menu-' + id, title, 'views/sys/menu/detail.html?&id=' + id)
		}

		window.setDisabledValue = function(obj) {
			if(obj.data.type == 'DIR' || obj.data.type == 'MENU') {
				layer.confirm('确定切换【启用/停用】状态？', { icon: 3, title: '提示' }, function(index) {
					layer.close(index);
					$.post('/sys/menu/setDisabledValue/' + obj.data.id, { disabled: !obj.data.disabled }, function(result) {
						if (result.code == 200) {
							window.refresh(true);
						}
					});
				});
			}
		}
	})
</script>
</body>
</html>
